<template>
    <div>
        <n-scrollbar style="max-height: 200px">
            <div class="params_main">
                <n-data-table
                :key="(row:any) => row.key"
                :columns="columns"
                :data="data"
                />
                <div class="add_btn_box">
                    <t-button @click="addRow" class="addData">+</t-button>
                </div>
            </div>
        </n-scrollbar>
    </div>
</template>

<script lang="ts" setup>
    import { watch, h, ref,defineComponent,defineExpose } from 'vue'
    // 表格

    // ========== 数据类型定义 ==========
    interface RowData {
    key: number
    KEY: string
    VALUE: string
    DESCRIPTION: string
    }

    const createData = (): RowData[] => {
    return [
        { key: 1, KEY: 'Cache-Control', VALUE: 'no-cache', DESCRIPTION: '' },
        { key: 2, KEY: 'Accept', VALUE: '*/*', DESCRIPTION: '' },
        { key: 3, KEY: 'Accept-Encoding', VALUE: 'gzip, deflate', DESCRIPTION: '' },
        { key: 4, KEY: 'Connection', VALUE: 'keep-alive', DESCRIPTION: '' },
        { key: 5, KEY: '',VALUE: '',DESCRIPTION: ''},
    ]
    }


    const data = ref<RowData[]>(createData())

    const getHeadersData = () => {
        const result: Record<string, string> = {}
        data.value.forEach(row => {
            if (row.key===1||row.key===2) {
                if (row.KEY && row.VALUE) {
                    result[row.KEY] = row.VALUE
                }
            }
        })
        return result
    }
    
    // ========== 根据 key 查找索引 ==========
    const getDataIndex = (key: number): number => {
    return data.value.findIndex(item => item.key === key)
    }

    // ========== 可编辑单元格组件：ShowOrEdit ==========
    // 必须用 defineComponent 才能使用 setup 和响应式
    const ShowOrEdit = defineComponent({
        props: {
            value: {
            type: String,
            default: ''
            },
            onUpdateValue: {
            type: Function,
            required: true
            },
            placeholder: {
            type: String,
            default: ''
            }
        },
        setup(props) {
            const isEdit = ref(false)
            const inputRef = ref<HTMLElement | null>(null)
            const inputValue = ref(props.value)

            // 同步外部 value 变化
            watch(() => props.value, (newVal) => {
            inputValue.value = newVal
            })

            const handleChange = () => {
            props.onUpdateValue(inputValue.value)
            isEdit.value = false
            }

            return () =>
                h('input', {
                    ref: inputRef,
                    value: inputValue.value,
                    placeholder: props.placeholder,
                    onUpdateValue: (v: any) => (inputValue.value = v),
                    onChange: handleChange,
                    onBlur: handleChange,
                    onClick: (e: MouseEvent) => e.stopPropagation(), // 防止冒泡
                    style:'border: none !important;',
                    class:"none-border-input",
                    })
        }
    })

    // ========== 列配置 ==========
    const columns = [
        {
            title: 'KEY',
            key: 'KEY',
            width: 300,
            render(row: RowData) {
            const index = getDataIndex(row.key)
            return h(ShowOrEdit, {
                value: row.KEY,
                onUpdateValue: (v: string) => {
                data.value[index].KEY = v
                },
                placeholder: 'Key'
            })
            }
        },
        {
            title: 'VALUE',
            key: 'VALUE',
            width: 300,
            render(row: RowData) {
            const index = getDataIndex(row.key)
            return h(ShowOrEdit, {
                value: row.VALUE,
                onUpdateValue: (v: string) => {
                data.value[index].VALUE = v
                },
                placeholder: 'Value'
            })
            }
        },
        {
            title: 'DESCRIPTION',
            key: 'DESCRIPTION',
            render(row: RowData) {
            const index = getDataIndex(row.key)
            return h(ShowOrEdit, {
                value: row.DESCRIPTION,
                onUpdateValue: (v: string) => {
                data.value[index].DESCRIPTION = v
                },
                placeholder: 'Description'
            })
            }
        }
    ]

    //表格加一行
    function addRow(){
        data.value.push({
            key: Date.now(), // 唯一 key
            KEY: '',
            VALUE: '',
            DESCRIPTION: ''
        })
    }
    

    defineExpose({getHeadersData})

</script>

<style scoped>
    .addData {
        background-color: #0052d9;
        color: #fff;
        border: 0px;
    }
    .add_btn_box {
        display: flex;
        margin-top: 10px;
    }
    .addData:hover {
        background-color: #0047ba;
    }
    :deep(.n-data-table-td),
    :deep(.n-data-table-th) {
        border-right: 1px solid #e8e8e8
    }
    :deep(.n-data-table-td:last-child),
    :deep(.n-data-table-th:last-child) {
        border-right: none;
    }
    :deep(.none-border-input:hover) {
        /* background-color: rgba(247, 247, 250, 1); */
        background-color: #fff;
    }
    .params_main {
        height: 260px;
    }
    .params_footer {
        height: 26.5vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>